<template>
  <div class="water-shop-box">
    <ul>
      <li class="line-bottom"
          v-for="(item, index) in shopArr"
          :key="index"
      @click="handleChooseShop(item)">
        <img :src="item.pic" alt="">
        <div class="msg color333 inline-block">
          <p class="fs16">{{item.name}} <span class="flr fs12 distance">{{item.distance}}km</span></p>
          <p class="fs12"> <i class="fs13 iconfont icondizhibiaoshix"></i>{{item.address}}</p>
          <p class="fs12"> <i class="fs13 iconfont icondizhibiaoshix"></i>{{item.phone}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props: ['shopArr'],
    methods: {
      handleChooseShop(item) {
        this.$emit('chooseShop', item)
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/base.scss";

  .water-shop-box {
    padding-left: 15px;
    box-sizing: border-box;
    li {
      height: 110px;
      padding: 15px 15px 15px 0;
      box-sizing: border-box;

      img {
        display: inline-block;
        width: 80px;
        height: 80px;
        vertical-align: top;
      }

      .msg {
        width: calc(100% - 90px);
        height: 100%;
        padding-left: 2px;
        box-sizing: border-box;

        p {
          line-height: 26px;

          .distance {
            color: #FD6252;
          }

          i {
            color: #7A7B82;
          }
        }
      }
    }
    /*水店详情*/
  }
</style>
